<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>代码生成工具</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style>
		.el-row {
			margin: 10px 0;
		}
	</style>
</head>
<body>
	<div id="app">
		<el-row :gutter="5">
			<el-col :span="2">
				<el-tag style="width: 100px">用 户 名：</el-tag>
			</el-col>
			<el-col :span="12">
				<el-input size="mini"  v-model="db.username" placeholder="请输入数据库用户名" style="width: 200px"/>
			</el-col>
		</el-row>
		<el-row :gutter="5">
			<el-col :span="2">
				<el-tag style="width: 100px"> 密     码：</el-tag>
			</el-col>
			<el-col :span="12">
				<el-input size="mini" v-model="db.password" placeholder="请输入数据库密码" style="width: 200px"/>
			</el-col>
		</el-row>
		<el-row :gutter="5">
			<el-col :span="2">
				<el-tag style="width: 100px">数据库连接：</el-tag>
			</el-col>
			<el-col :span="12">
				<el-input size="mini" v-model="db.url" placeholder="请输入数据库连接">
					<template slot="prepend">jdbc:mysql://</template>
					<template slot="append">?useSSL=false&characterEncoding=utf-8&serverTimeZone=Asia/Shanghai</template>
				</el-input>
			</el-col>
		</el-row>
		<el-row :gutter="5">
			<el-col :span="12">
				<el-button size="mini" type="warning" :disabled="isConnected" @click="connect">连接数据库</el-button>
				<el-button size="mini" type="danger" :disabled="!isConnected" @click="disconnect">断开连接</el-button>
				<span v-if="isConnected" style="color: #60ff61">*数据库连接成功*</span>
				<span v-if="!isConnected" style="color: #ff2752">*数据库未连接*</span>
			</el-col>
		</el-row>
		<el-row :gutter="5">
			<el-col :span="12">
				<el-input size="mini" v-model="packageName" style="width: 300px" placeholder="请输入包名"></el-input>
				<el-button size="mini" type="primary" @click="config">配置</el-button>
				<span v-if="isConfig" style="color: #60ff61">*配置成功*</span>
			</el-col>
		</el-row>
		<el-table :data="tableData" border stripe style="width: 100%; margin-top: 20px;">
			<el-table-column prop="tableName" align="center" label="表名" width="180"> </el-table-column>
			<el-table-column prop="domainName" align="center" label="实体类名称" >
				<template slot-scope="scope">
					<el-input v-model="scope.row.domainName"/>
				</template>
			</el-table-column>
			<el-table-column prop="mapperName" align="center" label="Mapper名称" >
				<template slot-scope="scope">
					<el-input v-model="scope.row.mapperName"/>
				</template>
			</el-table-column>
			<el-table-column prop="serviceName" align="center" label="Service名称" >
				<template slot-scope="scope">
					<el-input v-model="scope.row.serviceName"/>
				</template>
			</el-table-column>
			<el-table-column prop="controllerName" align="center" label="Controller名称" >
				<template slot-scope="scope">
					<el-input v-model="scope.row.controllerName"/>
				</template>
			</el-table-column>
		</el-table>
		<div style="margin-top: 15px">
			<el-button type="info" @click="generate">生成代码</el-button>
		</div>
		<div v-if="isGenerate">
			<div style="color: #60ff61; font-weight: bold" v-if="result">*{{result}}*</div>
			<div>{{filePath}}</div>
		</div>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                result: '',
				filePath: '',
                packageName: '',
                isConnected: false,
				isConfig: false,
				isGenerate: false,
                tableData: [],
                db: {
                    username: 'root',
                    password: 'root',
                    url:'localhost:3306/elishopdb'
                }
            }
        },
        methods: {
            generate() {
                if(!this.packageName) {
                    return this.$message.error('包名不能为空')
                }
                if(!this.isConnected) {
                    return this.$message.error('请先连接数据库后再进行操作')
                }
				if(!this.isConfig) {
					return this.$message.error('请先配置后再进行操作')
				}
                axios.post('/generate', this.tableData)
                    .then(res => {
						this.result = res.data.msg;
						this.filePath = res.data.data
                        this.$message.success('代码生成成功')

						this.isGenerate = true
						this.isConnected = false
						this.isConfig = false
						this.tableData = []
                    })
            },
            disconnect() {
                axios.post('/disconnect')
				.then(res => {
					this.result = ''
				    this.isConnected = false
				    this.isGenerate = false
					this.isConfig = false
					this.tableData = []
                    this.$message.success('断开数据库连接成功')
				})
			},
            connect() {
                this.db.url = `jdbc:mysql://${this.db.url}?useSSL=false&characterEncoding=utf-8&serverTimeZone=Asia/Shanghai`
                axios.post('/connect', this.db)
				.then(res => {
				    if(res.data.code === 200) {
				        this.$message.success('数据库连接成功')
						this.isConnected = true
						this.isGenerate = false
						this.result = ''
						this.db = {
                            username: 'root',
                            password: 'root',
                            url:'localhost:3306/elishopdb'
                        }
					} else {
                        this.$message.error(res.data.msg)
                        this.db = {
                            username: 'root',
                            password: 'root',
                            url:'localhost:3306/elishopdb'
                        }
					}
				})
			},
			config() {
                if(!this.packageName) {
                    return this.$message.error('包名不能为空')
                }
                if(!this.isConnected) {
                    return this.$message.error('请先连接数据库后再进行配置')
				}
                axios.post('/config', {packageName: this.packageName})
				.then(res => {
                    if(res.data.code === 200) {
                        this.isConfig = true
						this.tableData = res.data.data
                    }
				})
			}
        }
    })
</script>
</html>
